<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="icon" href="./favicon.ico">
    <title>小XX❤️小XX</title>
    <meta name="description" content="第一次遇到如此喜欢的女孩子buibui~">
    <meta name="keywords" content="lm">
    <link rel="stylesheet" type="text/css" href="./css/lovexhj.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" type="text/css" href="./css/FiraCode.css">
</head>

<body>
    <!-- 标题板块 -->
    <div class="title">
        <img src="./images/bg1.gif" alt="bgGif">
        <p id="tqyxhj"></p>
    </div>

    <!-- 分页1 - 骚话 -->
    <div class="page page1">
        <div class="swiper-container swiper-container-lovexhj1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=2750954800&s=640" alt="xhj">
                        <img src="./images/cat.gif" alt="cat">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=2669576358&s=640" alt="tqy">
                        <p id="lovetime"></p>
                        <p>我也不知道该准备一点什么给你逗你开心</p>
                        <p>还是写一点好玩的送给你吧~</p>
                        <span class="right">往右划动 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/cat2.gif" alt="cat2">
                        <p class="catText">你常对我发的表情 ↑</p>
                        <p>上次也是花心思写了一个小玩意给你</p>
                        <p>但我觉得整体设计&&界面都过于<b>LOW</b></p>
                        <p>那就重新送你一个吧</p>
                        <span class="right">再划一下 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/cat3.gif" alt="cat3">
                        <p class="catText">抱死你 ↑</p>
                        <p>这次我<b>超级超级超级超级</b></p>
                        <p>认真的写了一遍</p>
                        <p style="font-size: 13px;">以 框架构造、
                            <span style="color: red; font-size: 16px;">爱你</span>、
                            视觉体验、响应式 为核心制作
                        </p>
                        <span class="right">再划一次吧 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/cat4.gif" alt="cat4">
                        <p class="catText">拍你猪头 ↑</p>
                        <p>这次应该不会太难看了吧</p>
                        <p>希望你喜欢呀</p>
                        <p>爱你哟(๑′ᴗ‵๑)</p>
                        <b>我的<span style="color: pink;">猪</span></b>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj1"></div>
        </div>
    </div>

    <!-- 分页2 - 时间轴 -->
    <div class="page page2">
        <div class="swiper-container swiper-container-lovexhj2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/2.jpg" alt="2">
                        <p><b>故事的开始</b></p>
                        <p>2021-11-21</p>
                        <p>我们的故事，从此开始</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/1.jpg" alt="1">
                        <p><b>这是咱俩向往城市的照片</b></p>
                        <p>成为了我手机备忘录里唯一一张奋斗的的照片</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/2.jpg" alt="2">
                        <p><b>看看这些照片</b></p>
                        <p>咱俩美好的生活的向往</p>
                        <p>而我们不仅仅有眼前的苟且，还有诗和远方</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/3.jpg" alt="3">
                        <p><b>看看这些照片</b></p>
                        <p>咱俩美好的生活的向往</p>
                        <p>一起努力，凭我们聪明智慧</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/4.jpg" alt="4">
                        <p><b>看看这些照片</b></p>
                        <p>咱俩美好的生活的向往</p>
                        <p>情话很少，因为你，我懂得了爱</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/5.jpg" alt="5">
                        <p><b>看看这些照片</b></p>
                        <p>咱俩美好的生活的向往</p>
                        <p>如果爱不疯狂那就不是爱了...</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/6.jpg" alt="6">
                        <p><b>看看这些照片</b></p>
                        <p>咱俩美好的生活的向往</p>
                        <p>有了你，黑暗不再是黑暗</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/7.jpg" alt="7">
                        <p><b>看看这些照片</b></p>
                        <p>咱俩美好的生活的向往</p>
                        <p>没有你的日子就像一页没有书页的书</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/8.jpg" alt="8">
                        <p><b>看看这些照片</b></p>
                        <p>咱俩美好的生活的向往</p>
                        <p>请让上帝与天使见证我们的爱情</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/9.jpg" alt="9">
                        <p><b>More？</b></p>
                        <p>一起努力加油，</p>
                        <p>勇敢牛牛，不怕困难hahahahahah</p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj2"></div>
        </div>
    </div>

    <!-- 分页3 - 一段话 -->
    <div class="page page3">
        <div id="talkToXHJ">
            <b>爱情见证</b>
            <br />
            虽然我学历不高
            <br />
            <br />
            <b>虽然我能力不强...</b>
            <br />
            比较直男的我，还是用属于我的方式来送你一个小小的虚拟礼物
            <br />
            有的时候我经常在写代码不能陪你玩，其实我都在花心思做这个呢，我想把它做到很好很好，让你感受一下“代码”带来了趣味性
            <br />
            用心才能做得更好，陪你也是这样，每天的事情大同小异，除去日常琐事剩下的就是陪你，日复一日但是每天都会是不同的感觉，带来不同的乐趣
            <br />
            陪你吐槽xxx，陪你聊天，一起互怼一起疯，看似再平常不过的事情在我们这里都充满了开心
            <br />
            <br />
            <b>我想</b>
            <br />
            我想告诉你,当你四面八方都是敌,我就是你最后的那一面旗
            <br />
            用文字来对你说一些话感觉好像情书一样尴尬哈哈，那就不说了我
            <br />
            猪
            <br />
            ## 爱你的小洁洁 (๑′ᴗ‵๑)~ ❤
        </div>
    </div>

    <!-- 分页4 - 结尾 -->
    <div class="page page4">
        <div class="page4-box">
            <div class="page4-img">
                <div class="swiper-container swiper-container-lovexhj3">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./images/2.jpg" alt="page-4-1">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/3.jpg" alt="page-4-2">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/4.jpg" alt="page-4-4">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/5.jpg" alt="page-4-5">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/6.jpg" alt="page-4-6">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/7.jpg" alt="page-4-7">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/8.jpg" alt="page-4-8">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/9.jpg" alt="page-4-9">
                        </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-prev-lovexhj3"></div>
                    <div class="swiper-button-next swiper-button-next-lovexhj3"></div>
                </div>
            </div>
            <div class="page4-text">
                <h1>Send To Future</h1>
                <p><a>有你在的每一天都如糖果一样甜</p>
            </div>
        </div>

        <div class="footer">
            <div class="footerBox">
                <p>
                    &copy; 2022.1.30
                    <a href="#">小XX && 小XX</a>
                    <a href="#"></a>
                </p>
                <p>Made by<a href="https://github.com/local-host-8080/"> Copyright © 2019-2022 Someone. All rights
                        reserved.</a></p>
            </div>
        </div>
    </div>

    <!-- 两只ZXX一样的猪 -->
    <div class="xhjIsPig">
        <img src="./images/pig1.gif" alt="pig1" class="pig1">
        <img src="./images/pig2.gif" alt="pig2" class="pig2">
    </div>

    <!-- js加载 -->
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
    <script src="./js/typeit.min.js"></script>
    <script src="./js/swiper-3.4.2.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

    <script src="./js/lovetime.js"></script>
    <script src="./js/talk.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/su.js"></script>
    <script>
        (function () {
            new WOW().init()
        })()
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('body').wpSuperSnow({
                flakes: ['./images/004.png', './images/003.png', './images/002.png',
                    './images/001.png'
                ],
                totalFlakes: '100',
                zIndex: '999999',
                maxSize: '30',
                maxDuration: '20',
                useFlakeTrans: false
            });
        });
    </script>
    <embed id="myAudio" controls="false" autoplay loop preload="auto" src="./520.mp3" muted type="audio/mpeg">
    <!-- <source src="./520.mp3" type="audio/mpeg"> -->
    您的浏览器不支持 audio 元素。
    </embed>
    <script>
        setTimeout(() => {
            console.log(document.getElementById('myAudio'))
            document.getElementById('myAudio').muted = false
        }, 1500)
    </script>
    <!-- <audio autoplay="autoplay" src="./520.mp3">
        <center>
            <p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="0" height="0"
                    src="./520.mp3"></iframe></p>
        </center>
    </audio> -->

</body>

</html>